<template>
  <view class="decoratInfo">
    <view class="navList">
      <view class="navList-item" v-for="(item, i) in navList" :key="i" @click="navClick(i, item.title)" :class="{ activeNavList: activeNavList === i }">
        <text class="navList-title" :class="{ activeTitleList: activeNavList === i }">{{ item.title }}</text>
        <text class="navList-english" :class="{ activeEngList: activeNavList === i }">{{ item.descEnglish }}</text>
      </view>
    </view>
    <flow ref="flow" :dataLists='masonryList' @getListItem="getListItem"></flow>
    <tabBar :currentPage="'tabBar1'"></tabBar>
  </view>
</template>

<script>
import tabBar from '@/components/tabBar.vue'
import flow from '@/components/flowList/flow.vue'

export default {
  components: {
    tabBar,
    flow
  },
  data() {
    return {
      // 导航列表
      navList: [
        // { title: '全部', descEnglish: 'all' },
        { title: '泥工', descEnglish: 'masons' },
        { title: '木工', descEnglish: 'carpentry' },
				{ title: '水电', descEnglish: 'hydropower' },
				{ title: '油漆', descEnglish: 'paint' },
        { title: '其他', descEnglish: 'other' }
      ],
      activeNavList: 0,
      masonryList: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  onLoad() {
    let params = {
      page: this.page.pageIndex,
      limit: this.page.pageSize
    }
    this.init(params)
  },
  methods: {
    /**
     * 初始化信息
     * @param {object}  params 传参信息发送请求
     * @param {string}  typeName 分类名称
     * @param {boolean}  isType true 为加载更多 false 为重新加载数据
     */
    init(params, typeName = '泥工', isType) {
      params.typeName = typeName
      this.$api.getGoodTypeInfo(params).then(res => {
        if (res.success) {
          if (isType) {
    				// this.masonryList.push(...res.rows)
    				this.masonryList = res.rows
    				this.$refs.flow.setType(true)
    				uni.hideLoading()
          } else {
            this.masonryList = res.rows
    				this.$refs.flow.setType(false)
          }
          if (this._refresh) {
            uni.stopPullDownRefresh()
            uni.showToast({ title: '刷新成功', icon: 'success' })
            this._refresh = false
          }
        } else {
          uni.showToast({ title: res.msg, icon: 'none' })
        }
      }).catch(err => {
          console.log('request fail', err)
        })
    },
		// 获取点击图片的数据
		getListItem(item) {
		  // 进行跳转其他页面
			uni.navigateTo({
			  url: '../videoInfo/videoInfo?goodVideo=' + item.goodVideo + '&goodImg=' + item.goodImg + '&remark=' + item.remark
			})
		},
    navClick(i, item) {
      this.activeNavList = i
      if (this.itemName === item) return
      let params = {
        page: 1,
        limit: 10,
      }
      this.itemName = item
      this.page.pageIndex = 1
      this.init(params, this.itemName, false)
    }
  },
  onReachBottom() {
    uni.showLoading({ title: '正在加载更多' })
    // 模拟分页请求 (加载更多)
    this.page.pageIndex = this.page.pageIndex + 1
    let params = {
      page: this.page.pageIndex,
      limit: this.page.pageSize
    }
    this.init(params, this.itemName, true)
  },
  onPullDownRefresh() {
    // 模拟更新新数据
    let params = {
      page: 1,
      limit: 10,
    }
    // this._refresh 判断是否是刷新页面，true 为刷新数据更新完之后赋值为 false
    this._refresh = true
    // 刷新后赋值为第一页
    this.page.pageIndex = 1
    this.init(params, this.itemName, false)
  }
}
</script>

<style lang="scss" scoped>
.decoratInfo {
  .activeNavList {
    border-bottom: 3px solid $uni-color-base;
  }
  .navList {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
    position: -webkit-sticky;
    position: sticky;
    top: var(--window-top);
    z-index: 99;
    flex-direction: row;
    background: #ffffff;

    .navList-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 8rpx;

      .navList-title {
        color: $uni-text-color;
        font-size: 30rpx;
      }
      .navList-english {
        color: #999999;
      }
      .activeTitleList {
        font-weight: bold;
        color: $uni-color-base;
      }
      .activeEngList {
        color: $uni-color-base;
      }
    }
  }
}
</style>
